<template>
	<view class="page">
		<Newmsg ref="newmsg" :newmsg="newmsg"></Newmsg>
		<!-- <view :style="{height:(barHeight) + 'px'}" class="systemHeight"></view>
		<view class="tabs" >
			<u-tabs :list="getCategories" :current="barCurrent" activeColor="#000000" height="100" inactiveColor="#999"
				bgColor="#ffffff" gutter="30" :bold="true" fontSize="60" :showBar="true" barWidth="40"
				barHeight="20"></u-tabs>
		</view> -->
		<view class="header">
			<view class="search" @click="goSearch">
				<input class="search_ipt" placeholder="输入关键词搜索留言板"  readonly/>
				<view class="search_btn">搜索</view>
			</view>
			<view class="btn" @click="gopost"><i class="iconfont icon-quanju_tousu" />我要留言</view>
		</view>
		<view class="banner">
			<image src="https://wz.mala.cn/static/img/qzhswap-2023.jpg" class="bannerimg" mode="widthFix"></image>
		</view>
		<view class="wz_base_data">
			<view class="label">
				<view class="num">{{baseCount.hour}}</view>
				<view class="base_key">24小时内收到留言</view>
			</view>
			<view class="label">
				<view class="num">{{baseCount.allcount}}</view>
				<view class="base_key">累计收到留言</view>
			</view>
		</view>

		<view class="listMain">
			<view class="toutiao box" v-if="ToutiaoList.length>0">
				<i class="iconfont icon-shandian-shi" />
				<view class="tthead">
					<i class="iconfont icon-shandianfahuo"></i>
					<view class="i">头条速递</view>
				</view>
				<view class="ttlist">


					<view class="ttitem" v-for="(data,v) in ToutiaoList" @click="goToutiaoView(data)">
						<view class="title">
							{{data.title}}
						</view>
						<view class="desc">
							{{data.content}}
						</view>
					</view>



				</view>
			</view>
			<image src="https://wz.mala.cn/static/img/link1.jpg" mode="aspectFill"
				style="height:130rpx;width:100%;margin-top:30rpx;border-radius: 20rpx;"></image>
			<!-- #ifdef MP -->
			<view class="ganxie box" v-if="ganxie.length>0">
				<view class="gxlist">
					<swiper class="gx-swiper" circular :next-margin="90">
						<view v-for="(data,v) in ganxie">
							<swiper-item>
								<view class="gxitem">
									<view class="tthead">
										<i class="iconfont icon-ganxie"></i>
										<view class="i">感谢信</view>
									</view>
									<view class="title">
										{{data.title}}
									</view>
									<view class="desc">
										{{data.content}}
									</view>
								</view>
							</swiper-item>
						</view>
					</swiper>
				</view>
			</view>
			<!-- #endif -->
		</view>
		<view class="allList">
			<div class="head">
				<h3>更多留言</h3>
				<div class="order" @click="checkorder"><i class="iconfont icon-daoxu"></i>{{orderName}}</div>
			</div>
			<div class="allList-list">
				<Lylist  ref="userLylist"></Lylist>
			</div>
		</view>
	</view>
</template>

<script>
	import Lylist from '@/uni_modules/Lylist/Lylist.vue';
	import Newmsg from '@/uni_modules/Lylist/newmsg.vue';
	import {
		getBase
	} from '@/api/api.js';
	export default {
		components: {
			Lylist,
			Newmsg
		},
		data() {
			return {
				newmsg:true,
				barCurrent: 0,
				barHeight: "",
				getCategories: [{
					name: '体育',
					fid: 1
				}],
				ToutiaoList: [],
				baseCount: {},
				ganxie: [],
				order:'create_time',
				orderName:'发帖时间'
			}
		},
		onReachBottom() {
			this.$refs.userLylist.getIndexPage(this.order)
		},
		onLoad() {
			this.barHeight = uni.getSystemInfoSync().statusBarHeight
			this.getBase()
		},
		onShow() {
			this.newmsg = true
		},
		onHide() {
			this.newmsg = false
		},
		methods: {
			goSearch(){
				uni.navigateTo({
					url:'/pages/index/search'
				})
			},
			gopost(){
				uni.switchTab({
					url:'/pages/post/post'
				})
			},
			goView(wid){
				uni.navigateTo({
					url:'/pages/index/thread?wid='+wid
				})
			},
			goToutiaoView(data){
	
				if(data.type=='wid'){
					uni.navigateTo({
						url:'/pages/index/thread?wid='+data.value_id
					})
				}
			},
			checkorder(){
				if(this.order=='create_time'){
					this.order='reply_time'
					this.orderName = '回复时间'
				}else{
					this.order='create_time'
					this.orderName = '发帖时间'
				}
				this.$refs.userLylist.getList(this.order)
			},
			getBase() {
				let _this = this
				getBase({}).then(r => {
					if (r.data.code === 200) {
						_this.ToutiaoList = r.data.data.toutiao
						_this.ganxie = r.data.data.ganxie
						_this.baseCount = {
							hour: r.data.data.baseCount.hour,
							allcount: r.data.data.baseCount.allcount
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page,
	page {
		padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh
	}

	.gx-swiper {
		display: flex;
		height: 380rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;

		.btn {
			width: calc(40% - 20rpx);
			background-color: $base-color;
			color: #fff;
			text-align: center;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 70rpx;
			background-image: linear-gradient(to bottom, $base-color 5%, #1a52af 90%);

			.iconfont {
				margin-right: 10rpx;
				font-size: 32rpx;
			}
		}
	}

	.search {
		border: 2px solid $base-color;
		border-radius: 10rpx;
		z-index: 2;
		display: flex;
		overflow: hidden;
		position: relative;
		width: 60%;
		background-color: #fff;

		.search_ipt {
			font-size: 28rpx;
			padding: 0 25rpx;
			height: 70rpx;
			line-height: 70rpx;
			width: calc(100% - 100rpx);
		}

		.search_btn {
			color: $base-color;
			top: 0;
			height: 70rpx;
			line-height: 70rpx;
			width: 100rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			z-index: 2;
		}

	}

	.banner {
		margin-top: 30rpx;
		border-radius: 20rpx;

		.bannerimg {
			width: 100% !important;
			border-radius: 20rpx;
		}
	}

	.wz_base_data {
		background-color: #fff;
		display: flex;
		z-index: 1;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;

		.label {
			width: 50%;
			text-align: center;

			.num {
				color: #000;
				font-weight: bold;
				font-size: 40rpx;
			}

			.base_key {
				color: #666564;
				margin-top: 10rpx;
				font-size: 28rpx;
			}
		}
	}

	.box {
		margin-top: 30rpx;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;

		&.ganxie {
			background-color: transparent;
			padding: 0 !important;
			margin-top: 20rpx;
		}

		.icon-jurassic_love,
		.icon-shandian-shi {
			position: absolute;
			top: -20rpx;
			right: 0;
			font-size: 120rpx;
			// color:$base-color;
			opacity: .2;
			background-image: linear-gradient($base-color 10%, transparent 90%);
			background-clip: text;
			color: transparent;

			&.icon-jurassic_love {
				top: -30rpx;
			}
		}

		.tthead {
			display: flex;
			align-items: center;

			.iconfont {
				color: $base-color;
				font-size: 36rpx;
			}

			.i {
				color: $color2;
				font-size: 30rpx;
				margin-left: 10rpx;
			}
		}

		.ttlist {
			.ttitem {
				margin: 40rpx 0;

				&:first-child {
					margin-top: 20rpx;
				}

				.title {
					color: #000;
					font-weight: 800;
					font-size: 40rpx;
					text-align: justify;
					font-family: "toutiao";
				}

				.desc {
					color: $color2;
					font-size: 28rpx;
					margin: 10rpx 0;
				}
			}
		}

		.gxlist {
			.gxitem {
				padding: 20rpx;
				margin-right: 30rpx;
				overflow: hidden;
				background-color: #fff;
				border-radius: 20rpx;
				height: 320rpx;

				.icon-ganxie,
				.i {
					color: #d93636 !important;
					font-weight: bold;
				}
			}

			.title {
				color: #000;
				margin-top: 10rpx;
				font-size: 36rpx;
				text-align: justify;
			}

			.desc {
				color: $color2;
				font-size: 28rpx;
				text-overflow: ellipsis;
				display: -webkit-box !important;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
				margin: 10rpx 0;
				overflow: hidden;
			}
		}
	}

	.ganxiexin {
		.head {
			color: $base-color;
			font-size: 40rpx;
			font-weight: bold;
			margin: 20rpx 0;
		}
	}

	.allList {
		margin-top: 30rpx;

		.head {
			display: flex;
			justify-content: space-between;
			align-items: baseline;

			.order {
				color: #999;
				display: flex;
				font-size: 26rpx;

				.iconfont {
					margin-right: 5rpx;
				}
			}
		}
	}
</style>